/**
* banner管理
*/ 
<template>
  <div class="financing">
    <el-button style="margin-bottom: 15px" @click="addBanner">新增</el-button>

    <el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle" @sort-change="sortChangeHandle">
      <el-table-column prop="dictType" type="index" label="序号" header-align="center" align="center" width="65"></el-table-column>
      <el-table-column prop="dictName" label="图片" header-align="center" align="center" width="500">
        <template #default="scope">
          <img style="height: 100px" :src="`${baseUrl}/file/preview/${scope.row.imgFileId}`" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" header-align="center" align="center" width="300"></el-table-column>
      <el-table-column prop="seq" label="图片排序" header-align="center" align="center" width="130"></el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" align="center" width="130">
        <template #default="scope">
          <span v-if="scope.row.status == 1">不展示</span>
          <span v-if="scope.row.status == 2">展示</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="上传时间" sortable="custom" header-align="center" align="center" width="140"></el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center">
        <template #default="scope">
          <el-button v-if="scope.row.status == 2" type="primary" link @click="showDictDataHandle(scope.row)">不展示</el-button>
          <el-button v-if="scope.row.status == 1" type="primary" link @click="showDictDataHandle(scope.row)">展示</el-button>
          <el-button type="primary" link @click="handleEditBanner(scope.row)">编辑</el-button>

          <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled" icon-color="#626AEF" title="确定要删除吗?" @confirm="deleteBatchHandle(scope.row.id)">
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="state.pageSizes" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"></el-pagination>
    <el-dialog title="提示" v-model="dialogVisible" width="30%" :before-close="handleClose">
      <div>
        <el-form :model="form" label-width="120px">
          <el-form-item label="标题">
            <el-input v-model="form.title" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="form.seq" placeholder="请输入排序" />
          </el-form-item>
          <!-- <el-form-item label="是否展示">
						<el-select v-model="form.status" placeholder="是否展示">
							<el-option label="展示" :value="2" />
							<el-option label="不展示" :value="1" />
						</el-select>
					</el-form-item> -->
          <el-form-item>
            <el-upload :action="state.uploadUrl" :before-upload="beforeUpload" :on-success="handleSuccess" :show-file-list="false">
              <el-button type="primary">图片上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
// import { IHooksOptions } from '@/hooks/interface'
import type { UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
// import constant from '@/utils/constant'
// import { saveBannerAPI, getBannerListAPI, showBannerOrNotAPI, delBannerAPI, updateBannerAPI } from '@/api/education/banner'
import { InfoFilled } from '@element-plus/icons-vue'
// import { useUploadApi } from '@/api/file/attachment'
const dialogVisible = ref(false)
const form = reactive({
  id: '',
  title: '',
  seq: '',
  status: '',
  articleId: '',
  imgUrl: '',
  imgFileId: '',
})
const state = reactive({
  dataList: [],
  page: 1,
  pageSizes: 1,
  limit: 1,
  total: 1,
  uploadUrl: ""
})
const baseUrl = (window as any).globalUrl.url

console.log('---', baseUrl)

const addBanner = () => {
  dialogVisible.value = true
}

//修改是否展示该banner
const showDictDataHandle = (row: any) => {
  console.log(row)
  // showBannerOrNotAPI({
  //   ids: [row.id],
  //   status: row.status == 1 ? 2 : 1,
  // }).then((res) => {
  //   ElMessage.success({
  //     message: '操作成功',
  //     duration: 500,
  //     onClose: () => {
  //       getBannerList()
  //     },
  //   })
  // })
}
//编辑banenr
const handleEditBanner = (row: any) => {
  dialogVisible.value = true
  form.id = row.id
  form.status = row.status
  form.title = row.title
  form.seq = row.seq
}
//删除banner
const deleteBatchHandle = (id: any) => {
  // delBannerAPI(id).then((res) => {
  //   ElMessage.success({
  //     message: '操作成功',
  //     duration: 500,
  //     onClose: () => {
  //       getBannerList()
  //     },
  //   })
  // })
}
//分页处理
const sizeChangeHandle = () => {}

const currentChangeHandle = () => {}

const handleClose = () => {
  dialogVisible.value = false
}

const handleSuccess: UploadProps['onSuccess'] = (res, file) => {
  if (res.code !== 200) {
    ElMessage.error('上传失败：' + res.msg)
    return false
  } else {
    form.imgUrl = res.data.realPath
    form.imgFileId = res.data.fileId
    ElMessage.success('上传成功')
  }
}
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  if (file.size / 1024 / 1024 / 1024 / 1024 > 1) {
    ElMessage.error('文件大小不能超过100M')
    return false
  }
  return true
}

const handleSubmit = () => {
  if (form.id != '') {
    // updateBannerAPI(form).then((res) => {
    //   dialogVisible.value = false
    //   ElMessage.success({
    //     message: '操作成功',
    //     duration: 500,
    //     onClose: () => {
    //       getBannerList()
    //     },
    //   })
    // })
  } else {
    // saveBannerAPI(form).then((res) => {
    //   dialogVisible.value = false
    //   ElMessage.success({
    //     message: '操作成功',
    //     duration: 500,
    //     onClose: () => {
    //       getBannerList()
    //     },
    //   })
    // })
  }
}
1
const getBannerList = () => {
  // getBannerListAPI({
  //   limit: 10,
  //   page: 1,
  //   sidx: '',
  //   order: '',
  //   title: '',
  // }).then((res) => {
  //   state.dataList = res.data.list
  // })
}

getBannerList()
</script>

<style lang="scss" scoped>
.financing {
}
</style>
